<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:replace="admin/module/macros :: head('活动参与者')"></div>
<body class="app sidebar-mini rtl">
    <div th:replace="admin/module/macros :: header"></div>
    <div th:replace="admin/module/macros :: sidebar"></div>
    <main class="app-content">
        <div class="app-title">
            <div>
                <h1><i class="fa fa-users"></i> 活动参与者</h1>
                <p th:text="${activity.activityName}"></p>
            </div>
            <ul class="app-breadcrumb breadcrumb">
                <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
                <li class="breadcrumb-item"><a href="/admin/activities">活动管理</a></li>
                <li class="breadcrumb-item">活动参与者</li>
            </ul>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="tile">
                    <div class="tile-title-w-btn">
                        <h3 class="title">参与者列表</h3>
                        <p>
                            <a class="btn btn-secondary" href="/admin/activities">
                                <i class="fa fa-backward"></i> 返回活动列表
                            </a>
                        </p>
                    </div>
                    <div class="tile-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th width="80">头像</th>
                                        <th>用户名</th>
                                        <th>显示名</th>
                                        <th>邮箱</th>
                                        <th>注册时间</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:if="${participants.isEmpty()}">
                                        <td colspan="6" style="text-align:center">暂无参与者</td>
                                    </tr>
                                    <tr th:each="user : ${participants}">
                                        <td th:text="${user.userId}"></td>
                                        <td>
                                            <img th:if="${user.userAvatar != null}" th:src="${user.userAvatar}" style="width: 50px; height: 50px; border-radius: 50%;">
                                            <img th:unless="${user.userAvatar != null}" src="/static/img/Headportrait.jpg" style="width: 50px; height: 50px; border-radius: 50%;">
                                        </td>
                                        <td th:text="${user.userName}"></td>
                                        <td th:text="${user.userDisplayName ?: '-'}"></td>
                                        <td th:text="${user.userEmail ?: '-'}"></td>
                                        <td th:text="${#dates.format(user.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <div th:replace="admin/module/macros :: copyright"></div>
    <div th:replace="admin/module/macros :: bootstrap"></div>
</body>
</html>
